<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #form label{
            font-size: 12px;
            margin-top: 60px;
            margin-left: 30px;
            /* float: left; */
        }
        #form{
            border-radius: 10px;
            margin: 50px auto;
            padding-top: 30px;
            padding-left: 30px;
            overflow: hidden;
            padding-right: 30px;
            width: 380px;
            height: 380px;
            background-color: #DDEEF6;
        }
        #form input{
            height: 14px;
            width: 280px;
            float: right;
        }
        #form #free{
            float: none;
            width: 30px;
        }
        p{
            line-height:18px;
        }
        span{
            cursor: pointer;
            user-select: none;
            background-color: #EFEFEF;
            border: 1px solid black;
            border-radius: 3px;
            display: inline-block;
            width: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
        <form action="" id="form">
            <p>
                <label for="username">账号</label>
            <input type="text" id="username" placeholder="用户名不得使用特殊字符，长度在6-20之间"><br>
            </p>
            <p>
                <label for="username1">昵称</label>
            <input type="text" id="username1" placeholder="昵称只能输入3-6个中文"><br>
            </p>
            <p>
                <label for="eleemail">电子邮箱</label>
            <input type="text" id="eleemail" placeholder="@163.com"><br>
            </p>
            <p>
                <label for="idnum">身份证</label>
            <input type="text" id="idnum" placeholder="18位合法数字"><br>
            </p>
            <p>
                <label for="mbnumber">手机号码</label>
            <input type="text" id="mbnumber" placeholder="11位"><br>
            </p>
            <p>
                <label for="birthday">生日</label>
            <input type="text" id="birthday" placeholder="年/月/日"><br>
            </p>
            <p>
                <label for="password">密码</label>
                <input type="text" id="password" placeholder="长度小于20不能包含空格"><br>
            </p>
            <p>
                <label for="password1">确认密码</label>
                <input type="text" id="password1" placeholder="长度小于20不能包含空格">
            </p>
            <p>
                <label for="free">10天内免登陆</label>
                <input type="checkbox" id="free">
            </p>
            <p>
                <span id="act">确认</span>
                <span id="cancel">清空</span>
            </p>
        </form>


        <script>
            var inp = document.querySelectorAll('input')
            // 给act确定添加点击事件
            act.onclick = function(){
                // 定义一个值判断信息是否完全正确，为true就提交成功，为flase就提交失败
               var isok = true
            // 用户名需要满足的正则
               var reg1 = /^[(a-z)(A-Z)][\w\-]{5,11}$/
            // 昵称需要满足的正则
               var reg2 = /[\u4e00-\u9fa5]{3,6}/
            // 电子邮件满足的正则
               var reg3 = /^[a-zA-Z](\w|\-)+@163\.(com|cn|net)$/
            // 身份证满足的正则
               var reg4 = /^\d{17}(\d|x|X)$/
            // 手机号满足的正则
               var reg5 = /^1(3|4|5|6|7|8)\d{9}$/
            // 生日正则
               var reg6 = /^\d{1,4}(\\|\-)?(0[0-9]|1[0-2])(\\|\-)?(0[0-9]|[1-2][0-9]|3[0-1])$/
            // 密码正则
               var reg7 = /^\w{6,20}$/
                // 判断用户名inputvalue是否不满足要求
               if(reg1.test(username.value) !== true){
                     username.value = '用户名格式错误'
                     username.style.color = 'red'
                     isok = false
               }
               // 判断昵称inputvalue是否不满足要求
               if(reg2.test(username1.value) !== true){
                     username1.value = '昵称格式错误'
                     username1.style.color = 'red'
                    isok = false
               }
               // 判断电子邮箱inputvalue是否不满足要求
               if(reg3.test(eleemail.value)!==true){
                eleemail.value = '电子邮箱格式错误'
                eleemail.style.color = 'red'
                     isok = false
               }
               // 判断身份证号inputvalue是否不满足要求
               if(reg4.test(idnum.value) !== true){
                idnum.value = '身份证格式错误'
                idnum.style.color = 'red'
                   isok = false
               }
               // 判断手机号inputvalue是否不满足要求
               if(reg5.test(mbnumber.value) !== true){
                mbnumber.value = '手机号格式错误'
                mbnumber.style.color = 'red'
                   sumbit = false
               }
               // 判断生日inputvalue是否不满足要求
               if(reg6.test(birthday.value) !== true){
                birthday.value = '输入生日格式错误'
                birthday.style.color = 'red'
                    isok = false
               }
               //判断密码不能有空格
               if(password.value.match(/\s/g)){
                password.value = '密码不能有空格'
                password.style.color = 'red'
                    isok = false
               }
               // 判断密码inputvalue是否不满足要求
                if(reg7.test(password.value) !==true){
                    password.value = '密码格式错误'
                    password.style.color = 'red'
                    isok = false
               }
               // 判断用户名inputvalue是否不满足要求
                if(password.value !==password1.value){
                    password1.value = '密码不一致'
                    password1.style.color = 'red'
                   isok = false
               }
            //    只要有一个input正则不满足isok值就为false，都满足就为true然后提交成功
               if(isok == true){
                   alert('提交成功')
               }
            }


            for(var i =0;i<inp.length;i++){
                inp[i].onfocus = function(){
                    this.value = ''
                    this.style.color = 'black'
                }
            }
            // 添加清空时间
            cancel.onclick = function(){
                username.value = ''
                username1.value = ''
                eleemail.value = ''
                idnum.value = ''
                mbnumber.value = ''
                birthday.value = ''
                password.value = ''
                password1.value = ''
                free.checked = ''
            }
        </script>
</body>
</html>